<template>
    <div class="wrapper">

<!-- 引入header -->
        <v-head></v-head>

<!-- 引入侧边栏 -->
        <v-sidebar></v-sidebar>

<!-- 引入侧边栏右边组件 -->
        <div class="content-box" :class="{'content-collapse':collapse}">

<!-- tag标签 -->
            <v-tags></v-tags>

<!-- 具体路由 -->
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </div>

        </div>
    </div>
</template>

<script>
    import vHead from './Header.vue';
    import vSidebar from './Sidebar.vue';
    import vTags from './Tags.vue';
    import bus from './bus';
    export default {

// 初始化数据
        data(){
            return {
                tagsList: [],
                collapse: false
            }
        },

//添加组件
        components:{
            vHead, vSidebar, vTags
        },

// 浏览器回退问题解决
        mounted () {
          history.pushState(null, null, window.location.href);
          window.addEventListener('popstate', function () {
            history.pushState(null, null, window.location.href);
          });
        },
       
//tag标签处理
        created(){
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
            // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
            bus.$on('tags', msg => {
                let arr = [];
                for(let i = 0, len = msg.length; i < len; i ++){
                    msg[i].name && arr.push(msg[i].name);
                }
                this.tagsList = arr;
            })
           },
    }
</script>

<style scoped>
    .container{
        padding: 30px;
    }
    .img1 {
        align-self: auto;
        padding: 100px;
        margin-left: 200px;
    }

    h1 {
        padding: 0px;
        margin-left: 250px;

    }
</style>

